<template>
  <div class="user_page">
    <div class="page-header">
      <div class="header-info">
        <img class="avatar" src="~@/assets/imgRed/touxiang.jpg" />
        <div class="phone">您好，{{ userInfo.phone }}</div>
      </div>
      <div class="logout" @click="handleOutLoginClick">退出</div>
    </div>
    <div class="assets-wrapper">
      <div class="assets-title">
        <div class="name">总资产</div>
        <div class="value">
          <p
            v-if="
              this.$store.state.settingForm.indexDisplay &&
                !this.$store.state.settingForm.futuresDisplay
            "
          >
            ¥{{
              $store.state.hide
                ? "****"
                : $store.state.userInfo.userAmt
                ? Number(
                    $store.state.userInfo.userAmt +
                      $store.state.userInfo.userIndexAmt
                  ).toFixed(2)
                : 0
            }}
          </p>
          <p
            v-else-if="
              !this.$store.state.settingForm.indexDisplay &&
                this.$store.state.settingForm.futuresDisplay
            "
          >
            ¥{{
              $store.state.hide
                ? "****"
                : $store.state.userInfo.userAmt
                ? Number(
                    $store.state.userInfo.userAmt +
                      $store.state.userInfo.userFuturesAmt
                  ).toFixed(2)
                : 0
            }}
          </p>
          <p
            v-else-if="
              !this.$store.state.settingForm.indexDisplay &&
                !this.$store.state.settingForm.futuresDisplay
            "
          >
            ¥&nbsp;&nbsp;{{
              $store.state.hide
                ? "****"
                : $store.state.userInfo.userAmt
                ? Number($store.state.userInfo.userAmt).toFixed(2)
                : 0
            }}
          </p>
        </div>
      </div>
      <div class="assets-info">
        <div class="assets-item">
          <div class="name">冻结保证金</div>
          <div class="value">
            ¥
            {{
              userInfo.length != 0
                ? (
                    $store.state.userInfo.allFreezAmt +
                    $store.state.userInfo.djzj
                  ).toFixed(2)
                : 0
            }}
          </div>
        </div>
        <div class="assets-item">
          <div class="name">可用资金</div>
          <div class="value">
            <span v-if="!selectUserFlag">{{
              "¥ " + ($store.state.userInfo.enableIndexAmt || 0)
            }}</span>
            <span v-else>{{
              "¥ " + ($store.state.userInfo.enableAmt || 0)
            }}</span>
          </div>
        </div>
        <div class="assets-item">
          <div class="name">持仓总盈利</div>
          <div class="value red">
            {{ "¥ " + ($store.state.userInfo.allProfitAndLose || 0) }}
          </div>
        </div>
        <div class="assets-item">
          <div class="name">账户总盈利</div>
          <div class="value red">
            {{ "¥ " + ($store.state.userInfo.allProfitAndLose1 || 0) }}
          </div>
        </div>
      </div>
    </div>
    <div class="common-wrapper">
      <div class="title">常用功能</div>
      <div class="advisory-box">
        <div class="left">
          <img src="~@/assets/imgRed/touxiang.jpg" alt="" />
          <div class="info">
            <div>客服中心</div>
            <div class="fuwu">在线为您服务</div>
          </div>
        </div>
        <div class="right">立即咨询</div>
      </div>
      <div class="common-box">
        <div @click="$router.push('/loginPassword')" class="common-item">
          <img
            src=""
          />
          <p>登录密码</p>
        </div>
        <div @click="$router.push('/setPassword')" class="common-item">
          <svg
            t="1670394224864"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4406"
            width="64"
            height="64"
          >
            <path
              d="M874.4 394.2c-6.5-100.8-19.1-187.6-19.6-191.3-1.6-10.9-9.1-20-19.4-23.8L522.2 65.8c-6.6-2.4-13.9-2.4-20.5 0l-313 113.4c-10.4 3.8-17.8 12.9-19.4 23.8-0.5 3.6-13.2 90.5-19.6 191.3-3.8 59.6-4.6 111.6-2.4 154.6 2.9 57.3 11.1 98.3 25 125.6 20.5 40.1 79.8 97.9 181.3 176.8 72.7 56.5 140.9 103.1 141.6 103.6 5.1 3.5 11 5.2 16.9 5.2 5.9 0 11.8-1.7 16.9-5.2 0.7-0.5 68.9-47.1 141.6-103.6 101.4-79 160.7-136.8 181.2-176.9 13.9-27.2 22.1-68.3 25-125.5 2.2-43 1.4-95-2.4-154.7z m-648.2-165l226.5-82v306.7h-246c0.6-17 1.5-35.4 2.7-55.4 4.7-72.4 12.8-138.8 16.8-169.3z m407.6 574.7c-49.3 38.4-96.5 72.1-121.2 89.3V513.5h305.2c-1.2 82.7-11.9 118.6-19.6 133.7-9 17.9-42.5 61.9-164.4 156.7z"
              fill="#5d7dfb"
              p-id="4407"
            ></path>
          </svg>
          <p>资金密码</p>
        </div>
        <div class="common-item" @click="$router.push('/FundingDetails')">
          <img
            src=""
          />
          <p>资金流水</p>
        </div>
      </div>
    </div>
    <div class="other-wrapper">
      <div class="title">更多功能</div>
      <div class="other-box">
        <div @click="$router.push('/about?e=1')" class="other-item">
          <div class="left">
            <img
              src=""
            />
            <p class="name">版本更新</p>
          </div>
          <img class="arrow-right" src="~@/assets/img/youjiantou.png" alt="" />
        </div>
        <div @click="$router.push('/about?e=2')" class="other-item">
          <div class="left">
            <img
              src=""
            />
            <p class="name">用户协议</p>
          </div>
          <img class="arrow-right" src="~@/assets/img/youjiantou.png" alt="" />
        </div>
        <div @click="$router.push('/about?e=3')" class="other-item">
          <div class="left">
            <img
              src=""
            />
            <p class="name">隐私协议</p>
          </div>
          <img class="arrow-right" src="~@/assets/img/youjiantou.png" alt="" />
        </div>
        <div @click="$router.push('/about?e=4')" class="other-item">
          <div class="left">
            <img
              src=""
            />
            <p class="name">关于我们</p>
          </div>
          <img class="arrow-right" src="~@/assets/img/youjiantou.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, pwdReg } from "@/utils/utils";
import { MessageBox } from "mint-ui";

export default {
  name: "newUser",
  data() {
    return {
      name: "大狗子",
      selectUserFlag: true,
      settingDialog: false,
      oldPassword: "", // 旧密码
      newPassword: "", // 新密码
      cirNewPassword: "", //确认新密码
      userInfo: [],
      onlineService: "",
      currentRate: 100,
      rate: 0,
      showBtn: true
    };
  },
  components: {},
  created() {
    this.getUserInfo();
    this.getInfoSite();
  },
  methods: {
    handleOutLoginClick() {
      // 退出登录
      MessageBox.confirm(this.$t("hj149") + "?", this.$t("hj165"), {
        confirmButtonText: this.$t("hj161"),
        cancelButtonText: this.$t("hj106")
      })
        .then(() => {
          this.toRegister();
        })
        .catch(() => {});
    },
    goOnline() {
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      this.$router.push("/service");
    },
    async getInfoSite() {
      let data = await api.getInfoSite();
      if (data.status === 0) {
        this.onlineService = data.data.onlineService;
      } else {
        Toast(data.msg);
      }
    },
    goWall() {
      if (this.userInfo.length == 0) {
        this.$store.commit("dialogVisible", true);
        return;
      }
      this.$router.push("/wallet");
    },
    handleZh() {
      this.selectUserFlag = !this.selectUserFlag;

      if (this.userInfo.length == 0) {
        this.$store.commit("dialogVisible", true);
        return;
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.commit("dialogVisible", false);
        this.$store.state.userInfo = data.data;
        this.userInfo = data.data;
        this.rate = (data.data.enableAmt / data.data.userAmt) * 100;
        if (data.data.isActive === 1 || data.data.isActive === 2) {
          this.showBtn = false;
        }
      } else {
        this.$store.commit("dialogVisible", true);
      }
    },
    goToTopUp() {
      if (this.userInfo.length == 0) {
        this.$store.commit("dialogVisible", true);
        return;
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      this.$router.push("/wallet");
    },
    handleOutLoginClick() {
      // 退出登录
      MessageBox.confirm(this.$t("hj149") + "?", this.$t("hj165"), {
        confirmButtonText: this.$t("hj161"),
        cancelButtonText: this.$t("hj106")
      })
        .then(() => {
          this.toRegister();
        })
        .catch(() => {});
    },
    goToSettings() {
      if (this.userInfo.length == 0) {
        this.$store.commit("dialogVisible", true);
        return;
      }
      // 每次打开dialog 清空密码数据
      this.settingDialog = !this.settingDialog;
      if (this.settingDialog) {
        this.oldPassword = "";
        this.newPassword = "";
        this.cirNewPassword = "";
      }
    },
    handleGoToTransfer() {
      if (this.userInfo.length == 0) {
        this.$store.commit("dialogVisible", true);
        return;
      }
      this.$router.push("/transfers");
    },
    handleGoToAuthentication() {
      if (this.userInfo.length == 0) {
        this.$store.commit("dialogVisible", true);
        return;
      }
      this.$router.push("/authentications");
    },
    handleGoToBankCard() {
      if (this.userInfo.length == 0) {
        this.$store.commit("dialogVisible", true);
        return;
      }
      this.$router.push("/bankCard");
    },
    async toRegister() {
      // 注销登陆
      window.localStorage.removeItem("USERTOKEN"); // 清空本地存储 USERTOKEN字段
      this.clearCookie();
      let data = await api.logout();
      if (data.status === 0) {
        // Toast(data.msg)
        this.$router.push("/login");
      } else {
        Toast(data.msg);
      }
      this.$router.push("/login");
    },
    async changeLoginPsd() {
      // 修改密码
      if (
        isNull(this.oldPassword) ||
        isNull(this.newPassword) ||
        isNull(this.cirNewPassword)
      ) {
        Toast(this.$t("hj154"));
        this.settingDialog = false;
      } else if (!pwdReg(this.newPassword)) {
        Toast(this.$t("hj19"));
        this.settingDialog = false;
      } else {
        // 修改密码
        if (this.newPassword === this.cirNewPassword) {
          let opts = {
            oldPwd: this.oldPassword,
            newPwd: this.newPassword
          };
          let data = await api.changePassword(opts);
          if (data.status === 0) {
            this.changeLoginPsdBox = false;
            Toast(data.msg);
            this.settingDialog = false;
          } else {
            Toast(data.msg);
            this.settingDialog = false;
          }
        } else {
          Toast(this.$t("hj155"));
          this.settingDialog = false;
        }
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    }
  }
};
</script>

<style scoped lang="less">
.user_page {
  background-color: #fff;
  font-size: 14px;
  padding-bottom: 1.3rem;
  background-color: #fafafa;
  padding: 0 14px;
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding-top: 40px;
    .header-info {
      display: flex;
      align-items: center;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      .phone {
        margin-left: 10px;
      }
    }
  }
  .assets-wrapper {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding: 30px 0;
    background-color: #fff;
    margin-top: 20px;
    .assets-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px 30px;
      margin: 0 20px;
      border-bottom: 1px solid #dcdfe6;
      .name {
        font-size: 16px;
      }
    }
    .assets-info {
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px;
      .assets-item {
        width: 50%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0;
        border-bottom: 1px solid #dcdfe6;
        font-size: 14px;
        &:nth-child(odd) {
          padding-right: 10px;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 65%;
            background-color: #dcdfe6;
          }
        }
        &:nth-child(even) {
          padding-left: 10px;
        }
      }
    }
  }
  .common-wrapper {
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 10px 10px 0 0;
    padding: 30px 20px;
    background-color: #fff;
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    .advisory-box {
      margin-top: 20px;
      padding: 20px 20px;
      background-color: #ead08e;
      border-radius: 4px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #e6a23c;
      font-weight: bold;
      .left {
        display: flex;
        align-items: center;
        > img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .info {
          font-size: 12px;
          margin-left: 10px;
          .fuwu {
            margin-top: 7px;
          }
        }
      }
      .right {
        border: 1px solid #e6a23c;
        font-size: 14px;
        border-radius: 20px;
        padding: 10px 20px;
      }
    }
    .common-box {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      .common-item {
        width: 25%;
        text-align: center;
        svg {
          width: 0.7743rem;
          height: 0.7743rem;
        }
        img {
          width: 0.7743rem;
          height: 0.7743rem;
        }

        p {
          color: #333;
          font-size: 0.3738rem;
          margin-top: 0.267rem;
        }
      }
    }
  }
  .other-wrapper {
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding: 30px 0 0;
    background-color: #fff;
    .title {
      font-size: 16px;
      font-weight: bold;
      border-bottom: 1px solid #dcdfe6;
      padding: 0 20px 20px;
    }
    .other-box {
      margin-top: 20px;
      //   padding: 0 20px;
      .other-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        border-bottom: 1px solid #dcdfe6;
        .left {
          display: flex;
          align-items: center;
          > img {
            width: 40px;
            height: 40px;
          }
          .name {
            margin-left: 10px;
            font-size: 14px;
          }
        }
        .arrow-right {
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
</style>
